<?php
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>

<style type="text/css">
        * {
        	margin: 0;
        	padding: 0;
        }

        #clock {
        	position: relative;
        	width: 100%;
        	height: 198px;
        	margin: auto;
        	background: url(/clock/images/clockface.jpg) center no-repeat;
        	list-style: none;
        	}

        #sec, #min, #hour {
        	position: absolute;
        	width: 10px;
        	height: 198px;
        	top: 0px;
        	left: 50%;
        	}

        #sec {
        	background: url(/clock/images/sechand.png);
        	z-index: 3;
           	}

        #min {
        	background: url(/clock/images/minhand.png);
        	z-index: 2;
           	}

        #hour {
        	background: url(/clock/images/hourhand.png);
        	z-index: 1;
           	}

       
    </style>

    <script type="text/javascript">

        $(document).ready(function() {

              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";

              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

              }, 1000 );


              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";

              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});

              }, 1000 );


              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";

              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});

              }, 1000 );

        });

    </script>

	<ul id="clock">
	   	<li id="sec"></li>
	   	<li id="hour"></li>
		<li id="min"></li>
	</ul>
